import React from "react";
import { Progress } from "antd";
import ChartsWrap from "./chartsWrap";

const getRightColor = value => {
  let color = "#00e676";
  if (value > 90) {
    color = "#ff3d00";
  } else if (color > 80) {
    color = "#ff7043";
  } else if (value > 30) {
    color = "#40c4ff";
  }
  return color;
};

const progressChart = ({ value = [], title = "数据展示", width = 450 }) => {
  return (
    <ChartsWrap title={title} width={width}>
      <div className="cpu-wrap">
        {value.map((rate, index) => (
          <div className="cpu-item" key={index}>
            <p className="cpu-name">{`cpu${index + 1}`}</p>
            <Progress
              type="circle"
              strokeColor={getRightColor(rate)}
              status={rate >= 100 ? "exception" : "normal"}
              percent={parseInt(rate)}
            />
          </div>
        ))}
      </div>
    </ChartsWrap>
  );
};

export default progressChart;
